<template>
	<view class="container">
		<view class="address-form">
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">联系人</view>
					<input type="text" v-model="form.realName" placeholder="请填写收货人的姓名" placeholder-class="placeholder"/>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">性别</view>
					<view class="radio" @tap="form.gender = !form.gender">
						<image :src="form.gender ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>先生</view>
					</view>
					<view class="radio" @tap="form.gender = !form.gender">
						<image :src="!form.gender ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>女士</view>
					</view>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">手机号</view>
					<input type="text" v-model="form.phone" placeholder="请填写收货手机号码" placeholder-class="placeholder"/>
				</view>
			</list-cell>
<!-- 			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">收货地址</view>
					<input type="text" @tap="chooseLocation" v-model="form.address" placeholder="点击选择" placeholder-class="placeholder"/>
					<image src="/static/images/common/icon_jump_black3.png" class="jump-icon"></image>
				</view>
			</list-cell> -->
			
			<list-cell padding="30rpx">
		      <view class="form-item">
					<view class="label">小区</view>
					<input type="text" @tap="onHouse" v-model="form.houseName" placeholder="选择小区" placeholder-class="placeholder"/>
				  
				</view>
			</list-cell>
			
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">门牌号</view>
					<input type="text" v-model="form.detail" placeholder="例:B座6楼606室" placeholder-class="placeholder"/>
				</view>
			</list-cell>
			
			<list-cell padding="30rpx" last>
				<view class="form-item">
					<view class="radio" @tap="form.isDefault = !form.isDefault">
						<image :src="!form.isDefault ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>设为默认地址</view>
					</view>
				</view>
			</list-cell>
		</view>
		
		<view class="save-btn">
			<button type="info" class="button-info" @click="submitAdress">保存</button>
		</view>
		
	<houseWindow ref="houseWindow" :house='house' 
	 @OnChangeHouse="OnChangeHouse" @changeClose="changeClose"></houseWindow>
	 
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import {
		editAddress,
		getAddressDetail,
		editNewAddress
	} from '@/api/user.js'
	
	import houseWindow from '@/components/houseWindow';
	
	
	export default {
		components: {
			listCell,
			houseWindow
		},
		data() {
			return {
				form: {
					id: 0, //地址id
					realName: '',
					gender: 0,
					phone: '',
					detail: '',
					isDefault: 0,
					completeAddress: '',
					address: '',
					latitude: '',
					longitude: '',
					houseId: '',
					houseName: '',
					houseAddress: ''
				},
				textareaStatus: true,
				house: {
					house: false
				}, //小区组件
				houseId: 0, //地址id
				houseTitle: '小区选择'
				
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			this.getUserAddress();
			//调用子页面方法授权后执行获取地址列表
			this.$nextTick(function() {
				this.$refs.houseWindow.getHouseList();
			})
		},
		methods: {
			onHouse: function() {
					let that = this;
					that.house.house = true;
			},
			
			/**
			 * 选择地址后改变事件
			 * @param object e
			 */
			OnChangeHouse: function(houseId,houseName,addr) {
				this.form.houseId = houseId;
				this.form.houseName=houseName;
				this.form.houseAddress=addr;
				this.house.house = false;
			},
			
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.house, 'house', false);
			},
			
			
			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						const {errMsg, address, latitude, longitude, name} = res
						if(errMsg === "chooseLocation:ok") {
							this.form = Object.assign(
								this.form, 
								{completeAddress: address, latitude, longitude, address: name},
							)
						}
					}
				})
			},
			
			getUserAddress: function() {
				if (!this.id) return false;
				let that = this;
				getAddressDetail(this.id).then(res => {
					that.form=res.data;
				});
			},
				
			/**
			 * 提交用户添加地址
			 * 
			 */
			submitAdress() {
				let that = this;
				console.log(that.form)
				editNewAddress(that.form).then(res => {
					if (that.id)
						that.$util.Tips({
							title: '修改成功',
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: '添加成功',
							icon: 'success'
					});
					setTimeout(function() {
							// #ifdef H5
							return history.back();
							// #endif
							// #ifndef H5
							return uni.navigateBack({
								delta: 1,
							})
							// #endif
					}, 1000);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			}
    },
	
		
	}
</script>

<style lang="scss" scoped>
	
.address-form {
	margin-top: 20rpx;
	
	.form-item {
		width: 100%;
		display: flex;
		align-items: center;
		
		.label {
			width: 160rpx;
		}
		
		input {
			flex: 1;
		}
		
		.jump-icon {
			width: 30rpx;
			height: 48rpx;
		}
		
		.radio {
			display: flex;
			margin-right: 50rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
}

.save-btn {
	padding: 0 30rpx;
	margin-top: 60rpx;
	
	button {
		width: 100%;
		font-size: $font-size-extra-lg;
	}
}

.button-info {
	   background-color: #343434;
       color: #ffffff !important;
}
</style>
